require('./PageCFList.less');

import moment from 'moment';
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Link, Control,Route } from 'react-keeper';
import ChufaInfo from '../../../components/chufa/ChufaInfo';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells,
  Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,Article,
  MediaBoxInfoMeta,Input,CellsTips,Icon,Label,CellsTitle,Toptips,Toast,InfiniteLoader,Popup,PopupHeader,Grids,
  Tab,Footer,FooterLinks,FooterLink,FooterText,
  TabBody,ActionSheet,
  NavBar,Flex,FlexItem,
  NavBarItem,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea,SearchBar,PreviewItem} from  'react-weui/build/packages'
import rizhiup from './../../../assets/icon/上传.png';
import rizhiok from './../../../assets/icon/打钩.png';
import inputtp from './../../../assets/icon/输入.png';
import rqtp from './../../../assets/icon/日期.png';



const CellMore = () => (
  <Button type="primary" plain>Button</Button>
)

class CFList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,
      urlDisplay:false,

    }
    this.showLoading = this.showLoading.bind(this);
    this.keywordChange = this.keywordChange.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.goselectjl = this.goselectjl.bind(this);


    this.jlrqChange = this.jlrqChange.bind(this);
    this.jlrqClear = this.jlrqClear.bind(this);
    this.goInfo = this.goInfo.bind(this);
    this.goPage = this.goPage.bind(this);
    this.setSelectInfo = this.setSelectInfo.bind(this);

  }

  handleChange(e){
    console.log('htmlaaa');
  }

  goPage(){
    this.showLoading();
    console.log('html翻页001');
    Actions.addPage();
    console.log('html翻页001_over');
  }


  jlrqChange(e){
    console.log('jlrqChange');
    Actions.jlrqChange(e.target.value);
  }

  jlrqClear(e) {
  }


  keywordChange(text,e){
    console.log('html关键字');
    let keywords = [text];
    Actions.keySearch(keywords);
  }

  goInfo(){
     this.showLoading();
    Actions.goInfo();
  }

  showLoading() {
    this.setState({showLoading: true});

    this.state.loadingTimer = setTimeout(()=> {
      this.setState({showLoading: false});
    }, 2000);
  }

  setSelectInfo(obj) {
    Actions.setCurrentObj(obj);
    console.log(this.state.cfstore.router);
    Control.go('/myyewu/pdf',this.state.cfstore.currentObj);

  }


  goselectjl(obj) {
    Control.go('/myyewu/rizhiaq',obj);
  }


  render() {

    return (
      <div className="page cflist">
        <div>1</div>

        <page>

          <InfiniteLoader
            onLoadMore={ (resolve, finish) => {
              setTimeout( ()=> {
                if(this.state.cfstore.items.length > 30 || this.state.cfstore.lastPage ){
                    finish()
                }else{
                  console.info('循环开始');
                  this.goPage();
                  this.setState({
                    items: this.state.cfstore.items.concat([this.state.cfstore.items.length])
                  }, ()=> resolve())
                }
              }, 1000)

            }}
          >

          <Panel className="head-panel">



            <SearchBar
              onChange={this.keywordChange.bind(this)}
              defaultValue={this.state.cfstore.keyword}
              Value ={this.state.cfstore.keyword}
              placeholder="请输入关键字"
              lang={{
                cancel: '取消'
              }}
            />
            <PanelFooter>

              <FormCell>
                <CellHeader>
                  <img src={rqtp} alt="" o style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                </CellHeader>
                <CellBody>
                  <Input type="date" defaultValue={this.state.cfstore.jlrq}
                         Value={this.state.cfstore.jlrq}
                         onChange={this.jlrqChange.bind(this)}/>
                </CellBody>

              </FormCell>

            </PanelFooter>
          </Panel>





            <CellsTitle>总数: {this.state.cfstore.items.length}</CellsTitle>

            <Cells>

              {

                this.state.cfstore.items.length > 0 ?
                  this.state.cfstore.items.map((item,i)=>{
                    return (
                      <div>
                        <ChufaInfo ref="txselect" jlls={item} jlicon={this.state.cfstore.jlicon} jlpdf={this.state.cfstore.jlpdf} onSelectInfo={this.setSelectInfo}      />
                      </div>

                    )
                  })
                  : <MediaBox>未找到数据！</MediaBox>
              }

            </Cells>
            <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
        </InfiniteLoader>
        </page>
      </div>
    );
  }


  notice() {
    console.log('notice');
  }

  componentDidMount() {
    console.log('componentDidMount');


    if(Control.state){
      Actions.loadMode(Control.state);
    }
    else
    {

    }
  }



  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.cfstore || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] ) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] ) {
        return true;
      }
    }
    return false;
  }
}

CFList.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(CFList, Reflux.connect(Store, 'cfstore'));


export default CFList ;
